
<template>
  <div class="layout">
    <aside class="sidebar">
      <div class="logo">
        <i class="fas fa-lock"></i>
        <span>极简CRM系统</span>
      </div>
      <nav>
        <router-link to="/customer" active-class="active">客户管理</router-link>
        <router-link to="/business" active-class="active">业务管理</router-link>
        <router-link to="/workorder" active-class="active">工单管理</router-link>
        <router-link to="/user" active-class="active">人员管理</router-link>
      </nav>
    </aside>
    <div class="main">
      <header class="header">
        <span>欢迎使用CRM系统</span>
        <span class="user-info">
          <button class="user-btn" @click="showProfile = true">{{ userInfo.username || '未登录' }}</button>
          <a href="javascript:;" @click="logout">退出</a>
        </span>
      </header>
      <main>
        <slot />
      </main>
    </div>
  </div>
  <!-- 个人信息弹窗 -->
  <div v-if="showProfile" class="modal">
    <div class="modal-content" style="min-width:340px;max-width:400px;">
      <h3>个人信息</h3>
      <div style="margin-bottom:12px;">用户名：{{ userInfo.username }}</div>
      <div style="margin-bottom:12px;">职责：{{ userInfo.role }}</div>
      <div style="margin-bottom:12px;">邮箱：{{ userInfo.email }}</div>
      <div style="margin-bottom:12px;">
        <input v-model="oldPwd" type="password" placeholder="原密码" class="input-box" />
        <input v-model="newPwd" type="password" placeholder="新密码" class="input-box" />
      </div>
      <div class="modal-actions">
        <button class="btn" @click="changePwd">修改密码</button>
        <button class="btn" @click="showProfile = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const showProfile = ref(false)
const userInfo = ref({})
const oldPwd = ref('')
const newPwd = ref('')
const router = useRouter()

onMounted(() => {
  const user = JSON.parse(localStorage.getItem('user') || '{}')
  userInfo.value = user
})

function logout() {
  localStorage.removeItem('user')
  localStorage.removeItem('token')
  router.push('/login')
}

async function changePwd() {
  try {
    if (!oldPwd.value || !newPwd.value) {
      alert('请输入原密码和新密码！');
      return;
    }
    
    const res = await axios.post('http://localhost:8080/api/users/change-password', {
      username: userInfo.value.username,
      oldPwd: oldPwd.value,
      newPwd: newPwd.value
    });
    
    alert(res.data);
    oldPwd.value = '';
    newPwd.value = '';
    showProfile.value = false;
  } catch (err) {
    console.error('修改密码错误:', err);
    if (err.response?.status === 400) {
      alert('修改密码失败：' + err.response.data);
    } else {
      alert('修改密码失败：网络错误，请稍后重试');
    }
  }
}
</script>

<style scoped>
.layout { display: flex; height: 100vh; }
.sidebar {
  width: 200px;
  background: #16a085;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
}
.logo { font-size: 22px; margin-bottom: 32px; display: flex; align-items: center; gap: 8px; }
nav { display: flex; flex-direction: column; gap: 18px; width: 100%; }
nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 4px 0 0 4px;
  transition: background 0.2s;
}
nav a.active, nav a:hover { background: #138d75; }
.main { flex: 1; display: flex; flex-direction: column; }
.header {
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid #eee;
}
.user-info { color: #16a085; }
main { flex: 1; background: #f8f8f8; padding: 32px; overflow: auto; }

.user-btn {
  background: none;
  border: none;
  color: #16a085;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}
.user-btn:hover {
  text-decoration: underline;
}

.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.modal-content { background: #fff; padding: 24px; border-radius: 8px; min-width: 340px; max-width: 400px; width: 100%; font-size: 18px; box-sizing: border-box; }
.modal-actions { margin-top: 16px; display: flex; gap: 12px; }
.input-box {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #ecf0f1;
  border-radius: 16px;
  background: #fafafa;
  font-size: 16px;
  color: #222;
  margin-bottom: 8px;
  box-sizing: border-box;
  outline: none;
  transition: border 0.2s;
}
.input-box:focus { border-color: #16a085; }
</style>
